<div id="app" x-data="userForm" x-init="fetchData()">
  <div class="px-4 sm:px-6 lg:px-8">
    <div class="sm:flex sm:items-center">
      <div class="sm:flex-auto">
        <h1 class="text-base font-semibold leading-6 text-gray-900">{{user_list}}</h1>
      </div>
      <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
        <button
          @click="addUser()"
          class="block rounded-full bg-gradient-to-r from-green-400 to-blue-500 px-4 py-2 text-center text-sm font-semibold text-white shadow-lg hover:from-green-300 hover:to-blue-400 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-green-500 transform transition duration-150 ease-in-out"
        >
          {{add_user}}
        </button>
      </div>
    </div>
    <div class="mt-8 flow-root">
      <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
        <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
          <table class="min-w-full divide-y divide-gray-300 rounded-lg">
            <thead>
              <tr>
                <th
                  scope="col"
                  class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0 rounded-lg"
                >
                  {{username}}
                </th>
                <th
                  scope="col"
                  class="relative py-3.5 pl-3 pr-4 text-right sm:pr-0 rounded-lg"
                >
                  {{delete}}
                </th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
              <template x-for="user in users" :key="user.id">
                <tr>
                  <td
                    class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0 rounded-lg"
                    x-text="user.username"
                  ></td>
                  <td
                    class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-0 rounded-lg"
                  >
                    <a
                      href="#"
                      class="text-sky-600 hover:text-sky-900 rounded-full"
                      @click.prevent="deleteUser(user.id)"
                      >{{delete}}<span class="sr-only">, {{delete}}</span></a
                    >
                  </td>
                </tr>
              </template>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>